<template>
  <div class="page-header" w-full h-full>
    <div flex h-full style="align-items: center">
      <div fontsize-20>{{ props.title }}</div>
      <el-divider direction="vertical" />
      <slot name="left"></slot>
    </div>
    <el-space>
      <slot name="icon"></slot>
      <el-input v-model="searchValue" style="width: 240px" placeholder="请输入关键信息进行搜索">
        <template #suffix>
          <el-icon class="el-input__icon" @click.stop="searchClick"><Search /></el-icon>
        </template>
      </el-input>
      <el-button v-if="props.isAdd" type="primary" @click="addClick">新增</el-button>
    </el-space>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

interface Props {
  title: string;
  isAdd?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  title: "",
  isAdd: true
});
const emit = defineEmits(["searchClick", "addClick"]);
//搜索框value
const searchValue = ref("");
const searchClick = () => {
  emit("searchClick", searchValue.value);
};
const addClick = () => {
  emit("addClick");
};
</script>

<style scoped lang="scss">
.page-header {
  height: 48px;
  line-height: 48px;
  text-align: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-input__icon {
  &:hover {
    cursor: pointer;
    color: #409eff;
  }
}
</style>
